﻿/**
 * User only
 */
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', baseUrl + '/extjs/ux');
// Ext.Loader.setPath('Ext.chart', baseUrl + '/extjs/src/chart');
// Ext.Loader.setPath('Ext.draw', baseUrl + '/extjs/src/draw');
// Ext.Loader.setPath('Ext.plugins', baseUrl + '/extjs5/plugins');
Ext.define('Cps.view.dashboard.Dashboard1', {
	extend : 'Ext.panel.Panel',
	alias : 'widget.dashboard1',
	layout: 'border',
	requires: [ 
		// 'Ext.chart.PolarChart', 
		// 'Ext.chart.CartesianChart', 
		// 'Ext.chart.interactions.Rotate', 
		// 'Ext.chart.interactions.ItemHighlight', 
		// 'Ext.chart.series.Pie', 
		// 'Ext.draw.sprite.Rect', 
		// 'Ext.chart.axis.Numeric', 
		// 'Ext.chart.axis.Category', 
		// 'Ext.chart.series.Bar', 
		// 'Ext.chart.series.Line', 
		// 'Ext.chart.series.Area', 
		// 'Ext.chart.series.Radar', 
		// 'Ext.chart.series.Scatter'
		'Ext.chart.*',
		'Ext.ux.grid.feature.MultiGroupingSummary',
		'Ext.ux.grid.plugin.GroupingPanel'
	],
	id: 'dashboard1',
  initComponent: function() {
  	var store = Ext.create('Ext.data.Store', {
		storeId:'employeeStore',
		fields:['name', 'seniority', 'department'],
		groupField: ['name'],
		data: {'employees':[
			{ "name": "1",  "seniority": 7, "department": "Management" },
			{ "name": "2", "seniority": 2, "department": "Sales" },
			{ "name": "3",    "seniority": 3, "department": "Sales" },
			{ "name": "1",   "seniority": 4, "department": "Accounting" },
			{ "name": "2",  "seniority": 5, "department": "df" },
			{ "name": "2", "seniority": 2, "department": "Salđes" },
			{ "name": "3",    "seniority": 3, "department": "fdf" },
			{ "name": "1",   "seniority": 4, "department": "Accosaeaunting" },
			{ "name": "2",  "seniority": 5, "department": "sdsđ" }
		]},
		proxy: {
			type: 'memory',
			reader: {
				type: 'json',
				rootProperty: 'employees'
			}
		}
	});
	this.items = [
	{
		xtype: 'container',
		region: 'north',
		padding: 5,
		frame: true,
		items: [
		{
			xtype: 'button',
			cls: 'home',
			iconCls: 'iconHome',
			text: 'Home',
			menu: [
			{
				text: Cps.Locale.Dashboard1.home_btn1,
				id: 'centerManager',
				listeners: {
					beforerender: {
						fn : LoadCenterList
					}
				}
			}]
		},{
			xtype: 'tbtext',
			text: 'Concept Web',
			style: 'color: #000;font-weight: bold;font-size: 18px; margin-left: 40%;'
		},
		/*{
			xtype: 'tbfill'
		},*/
		{
			xtype: 'button',
			text: 'Test',
			menu: [
			{
				text: Cps.Locale.LOGOUT,
				handler: function(event, toolEl, panelHeader) {
					location.href = baseUrl + '/user/logout';
				}
			}]
		},{
			xtype: 'splitbutton',
			iconCls : 'flag flag-gb',
			text:'English',
			handler: function () {
				changeLanguage('en');
			},
			listeners: {
				afterrender: {
					fn: function() {
						if (CheckLang() == "fr") 
							this.el.setOpacity(0.5);
						else 
							this.el.setOpacity(1); 
					}
				}
			},
			menu:{
				xtype: 'menu',
        plain: true,
        items: [
				{
					iconCls : 'flag flag-fr',
					text:'France',
					handler: function () {
						changeLanguage('fr');
					},
					listeners: {
						afterrender: {
							fn: function() {
								if (CheckLang() == "en") 
									this.el.setOpacity(0.5);
								else 
									this.el.setOpacity(1); 
							}
						}
					}
        }]
			}
		}
		]
	},{
		xtype: 'panel',
		region: 'west',
		collapsible: true,
		resizable : true,
		resizeHandles: 'e',
		width: 180,
		frame: true,
		title: Cps.Locale.Dashboard1.title_west,
		layout: 'fit',
		items: [
			{
				xtype: 'panel',
				layout: 'fit',
				items: [
					{
						xtype: 'treepanel',
						id: 'trp',
						itemId: 'trpItem',
						border: false,
						lines: false,
						rootVisible: false,
						root: {
							expanded: true,
							children: [
								{ text: Cps.Locale.Dashboard1.node1, leaf: true, iconCls: 'node1'},
								{ text: Cps.Locale.Dashboard1.node2, expanded: true, children: [
									{ text: Cps.Locale.Dashboard1.node2_1, leaf: true, iconCls: 'node2_1'},
									{ text: Cps.Locale.Dashboard1.node2_2, leaf: true, iconCls: 'node2_2'},
									{ text: Cps.Locale.Dashboard1.node2_3, leaf: true, iconCls: 'node2_3'}
								]}
							]
						},
						listeners: {
							itemclick: function () {
								onDisplay(2);
							}
						}
				}]							
			}
		]
		},
	{
		xtype: 'panel',
		region: 'center',
		frame: true,
		layout: { type: 'vbox', align: 'stretch'},
		items: [
			{
				xtype: 'panel',
				id: 'pnFilter',
				bodyPadding: 5,
				autoHeight: true,
				title: Cps.Locale.Dashboard1.title_center1,
				tools: [
					{
						xtype: 'combo',
						id: 'cbb',
						width: 200,
						editable: false,
						store: Ext.create('Ext.data.Store', {
							fields: ['id', 'name'],
							data: [
								{"id":"1", "name":Cps.Locale.Dashboard1.combo1},
								{"id":"2", "name":Cps.Locale.Dashboard1.combo2},
								{"id":"3", "name":Cps.Locale.Dashboard1.combo3},
								{"id":"4", "name":Cps.Locale.Dashboard1.combo4},
								{"id":"5", "name":Cps.Locale.Dashboard1.all}
							],
							}),
						queryMode: 'local',
						displayField: 'name',
						valueField: 'id',
						value: '5',
						listeners: {
							select: function() {
								onDisplay(2);
							}
						}
					},
					{
						xtype: 'button',
						iconCls: 'btnFilter1',
						text: Cps.Locale.Dashboard1.btnfilter1,
						action: 'criteria'
					}
				]
			},
			{
				xtype: 'panel',
				id: 'zone4',
				flex: 6,
				layout: 'fit',
				title: Cps.Locale.Dashboard1.title_center2,
				items: [
					{ //grid
						xtype: 'grid',
						id: 'gridZone4',
						hidden: true,
						autoScroll: true,
						columns: [],
						plugins: [
							Ext.create('Ext.ux.grid.plugin.GroupingPane')
						],
						features: [
							Ext.create('Ext.ux.grid.feature.MultiGroupingSummary', {
							id:                     'group',
							//hideGroupedHeader:      true,
							enableGroupingMenu:     true,
							startCollapsed:         true
						}),{
					        ftype: 'summary',
									dock:   'bottom'
						}],
						border: 0
					}
				],
				tools: [	
					{
						xtype: 'combo',
						id: 'cbb1',
						editable: false,
						hidden: true,
						store: Ext.create('Ext.data.Store', {
							fields: ['id', 'name'],
							data: [
								{"id":"1", "name":Cps.Locale.Dashboard1.chart1},
								{"id":"2", "name":Cps.Locale.Dashboard1.chart2},
								{"id":"3", "name":Cps.Locale.Dashboard1.chart3},
								{"id":"4", "name":Cps.Locale.Dashboard1.chart4},
								{"id":"5", "name":Cps.Locale.Dashboard1.chart5},
								{"id":"6", "name":Cps.Locale.Dashboard1.chart6},
								{"id":"7", "name":Cps.Locale.Dashboard1.chart7},
								{"id":"8", "name":Cps.Locale.Dashboard1.chart8}
								//{"id":"9", "name":Cps.Locale.Dashboard1.chart9}
							],
						}),
						queryMode: 'local',
						displayField: 'name',
						valueField: 'id',
						value: "1",
						listeners: {
							select: function() {
								onDisplay(2);
							}
						}
					},{
						xtype: 'button',
						iconCls: 'btnZone4_1',
						cls: 'toolZone4',
						handler: function() {
							var zone4 = Ext.getCmp('zone4');
							if (zone4.items.items[0].isVisible())
							{
								Ext.getCmp("zone4").mask('Please wait...');
								zone4.items.items[0].store.initData();
							}
						}
					},
					{
						xtype: 'button',
						iconCls: 'btnZone4_2',
						cls: 'toolZone4'
					},
					{
						xtype: 'button',
						tooltip: Cps.Locale.Dashboard1.print,
						iconCls: 'btnZone4_3',
						cls: 'toolZone4',
						handler: function(button){
							var zone4= Ext.getCmp('zone4');
							var grid= zone4.items.items[0];

							var baseUrl= window.location.origin + '/dev/cps_extjs4/';

							if (grid.isVisible()){
								grid.print({
									printCSS: [
										baseUrl + 'extjs/resources/css/ext-all.css',
										baseUrl + 'extjs/ux/grid/feature/resources/MultiGroupingSummary.css',
										baseUrl + 'extjs/ux/grid/plugin/resources/GroupingPanel.css'
									],
									printStyle: true,
									printTitle: 'List',
									printWidth:11,
									printHeight:8.5
								});
							}
						}
					},
					{
						xtype: 'button',
						tooltip: Cps.Locale.Dashboard1.exportToExcel,
						iconCls: 'btnZone4_4',
						cls: 'toolZone4',
						handler : function(button, event){
							var zone4= Ext.getCmp('zone4');
							var grid= zone4.items.items[0];
							if (grid.isVisible()){
								grid.downloadExcelXml();
							}
						}
					},
				]
			}]
		}];
  	this.listeners = {
			afterrender: function() {
				Ext.getCmp('centerManager').ownerCt.ownerButton.showMenu();
				Ext.getCmp('centerManager').ownerCt.ownerButton.hideMenu();		
			},
			afterlayout: function() {
				var cbb = Ext.getCmp('cbb'), width = 0;
				if (cbb.ownerCt.items.items[0].text != undefined)
					width = textWidth(cbb.ownerCt.items.items[0].text) + 20;
				else
					width = textWidth(cbb.ownerCt.items.items[0].renderData.title) + 20;
				cbb.el.setStyle('left',width + 'px');
			}
		},
		this.callParent(arguments);
  }
});
function CheckLang() {
	var lang;
	var scripts = document.getElementsByTagName('script');
	for (var i = 0; i < scripts.length; i++)
	{
		var c = scripts[i].src.search('locale');
		if (c != -1)
		{
			var b = scripts[i].src;
			lang = b.substring(b.search('locale') + 7 ,b.length).split('.')[0];
			break;
		}
	}
	return lang;
};
function LoadCenterList() {
	var menu = [];
	var btnMenu = this;
	Ext.Ajax.request({
		method: 'GET',
		url: Cps.Config.Api.getCenter,
		success: function(data) {
			data = Ext.JSON.decode(data.responseText).data;
			data = data ? data.ttCenter : null;
			data = data ? data.ttCenterRow : null;
			for(i = 0; i < data.length; i++) {
				menu[i] = { text: data[i].CenterCode + " " + data[i].CenterName, value: data[i].CenterId, iconCls: 'unchecked',
					handler: function () {
						var items = this.ownerCt.items.items;
						for (var i = 0; i < items.length; i++)
						{
							if (items[i] != this)
							{
								items[i].iconEl.addCls('unchecked');
								items[i].iconEl.removeCls('checked');
							}
							else
								items[i].iconEl.removeCls('unchecked');
						}
						this.iconEl.addCls('checked');
					}
				};
			}
			menu[0].iconCls = 'checked';
			btnMenu.setMenu(menu);
		},
		scope: this
	});
};
